<template>
	<view>
		<view class="change" @click="changeContent">
			没找到想要的？赶紧点击这里
			<text class="change-btn">换一批</text>
			<view class="card">
				点击下方卡片可直接复制
			</view>
		</view>
		<waterfall :value="dataList" :scrolltolower="getRecommendLove" ref="child">
			<template v-slot:left="left">
				<view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)">
					<view class="item">
						{{item.content}}
					</view>
				</view>
			</template>
			<template v-slot:right="right">
				<view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)">
					<view class="item">
						{{item.content}}
					</view>
				</view>
			</template>
		</waterfall>
	</view>
</template>

<script>
	import {
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	import waterfall from '../../component/waterfall/index.vue'
	import api from '../../axios/http.api.js'
	export default {
		name: 'content',
		components: {
			waterfall
		},
		setup() {
			const state = reactive({
				dataList: [],
				loading: false,
			})
			const methods = reactive({
				getRecommendLove: async () => {
					state.loading = true
					let res = await api.getRecommendLove()
					state.loading = false
					if (!res || res.code) {
						uni.showToast({
							title: (res && res.msg) || '服务器正在维护中...',
							icon: 'none',
							position: 'top'
						})
						return
					}
					state.dataList = res.data
				},
				copy(item) {
					// 复制话术到剪切板
					uni.setClipboardData({
						data: item.content
					})
					methods.score(item.id)
				},
				// 换一批
				changeContent() {
					this.$refs.child.clear()
					state.dataList = []
					methods.getRecommendLove()
				},
				// 打分
				async score(id) {
					let res = await api.loveScore({
						id
					})
					if (!res || res.code) {
						uni.showToast({
							title: (res && res.msg) || '服务器正在维护中...',
							icon: 'none',
							position: 'top'
						})
					}
				}

			})
			onMounted(() => {
				methods.getRecommendLove()
				// 分享菜单
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})

			})
			return {
				...toRefs(state),
				...toRefs(methods)
			}
		}
	}
</script>

<style lang="less" scoped>
	.change {
		width: 100%;
		height: 18vh;
		border-bottom: 2px #aaaaff solid;
		border-radius: 0 0 50px 50px;
		background-size: 100% 100%;
		opacity: 0.8;
		padding-top: 45px;
		text-align: center;
		font-size: 20px;
		color: #000000;
		background-image: url(../../static/imgs/img4.png);

		.change-btn {
			display: inline-block;
			padding: 2px;
			color: red;
		}

		.card {
			padding-top: 12px;
			font-size: 13px;
		}
	}

	.left-content {
		margin: 15px 5px 15px 10px;
		padding: 8px;
		border-radius: 6px;
		background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
		font-size: 16px;
		letter-spacing: 5px;

		.item {
			margin-bottom: 10px;
		}
	}

	.right-content {
		margin: 15px 10px 15px 5px;
		padding: 8px;
		border-radius: 6px;
		background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
		font-size: 16px;
		letter-spacing: 5px;

		.item {
			margin-bottom: 10px;
		}
	}
</style>
